/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width: 8px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
	border-radius: 10px;
}
::-webkit-scrollbar-thumb:window-inactive {
    background: #999;
}
html, body{
    margin: 0;
}
.element-doc{ padding-top: 50px; }
.element-doc .intro-title{ font-size: 28px; line-height: 1; color: #000;}
.element-doc .intro-content{ margin: 14px 0; font-size: 14px; }
.element-doc .base-title{ margin: 55px 0 20px; font-size: #333; }
.element-doc .show-case-title{ font-size: 20px; color: #666;}
.element-doc .base-content{ margin: 14px 0; color: #5e6d82;}
.element-doc .demo-block .demo-block-source{ padding: 24px; }
.element-doc .demo-block .demo-block-core{ display: none; transition: height 0.5s; padding: 24px; border-top: 1px solid #eaeefb; background-color: #f9fafc; font-size: 12px;}
.element-doc .demo-block .demo-core-box{ width: 96%; height: 350px; border: none; outline: none; resize: none; background-color: #f9fafc; padding: 8px 2%; box-sizing: content-box;}
.element-doc .demo-block .demo-block-footer{ position: relative; height: 44px; line-height: 44px; text-align: center; white-space: nowrap; border-top: 1px solid #eaeefb; box-sizing: border-box; cursor: pointer; color: #666;}
.element-doc .demo-block .demo-block-footer:hover{ color: #409eff; background-color: #f9fafc}
.element-doc .demo-block .demo-ms-h{ display: none; }
.element-doc .demo-block .demo-online{ position: absolute; top: 0; right: 24px; text-align: right; color: #409eff; text-decoration: none; font-size: 12px;}
.element-doc .demo-block.show-case-core .demo-block-core{ display: block; }
.element-doc .demo-block.show-case-core .demo-ms-s{ display: none; }
.element-doc .demo-block.show-case-core .demo-ms-h{ display: block; }
.element-doc .demo-core-box.height20{ height: 20px; }
.element-doc .demo-core-box.height100{ height: 100px; }
.element-doc .demo-core-box.height150{ height: 150px; }
.element-doc .demo-core-box.height200{ height: 200px; }
.element-doc .demo-core-box.height250{ height: 250px; }
.element-doc .demo-core-box.height300{ height: 300px; }
.element-doc .demo-core-box.height350{ height: 350px; }
.element-doc .demo-core-box.height400{ height: 400px; }
.element-doc .demo-core-box.height450{ height: 450px; }
.element-doc .demo-core-box.height500{ height: 500px; }
.element-doc .demo-core-box.height550{ height: 550px; }
.element-doc .demo-core-box.height600{ height: 600px; }
.element-doc .mr10{ margin-right: 10px; }
.element-doc .mb10{ margin-bottom: 10px; }
.element-doc .mr20{ margin-right: 20px; }
.element-doc .mb20{ margin-bottom: 20px; }

.element-doc .attri-table{ width: 100%; border-collapse: collapse;}
.element-doc .attri-table > thead > tr > th{ padding: 15px 15px 15px 10px; white-space: nowrap; color: #909399; text-align: left; font-weight: 400; border-bottom: 1px solid #dcdfe6;}
.element-doc .attri-table > tbody > tr > td{ padding: 15px 15px 15px 10px; white-space: nowrap; color: #606266; text-align: left; font-weight: 400; border-bottom: 1px solid #dcdfe6;}
.element-doc .demo-block .bh-button, .element-doc .demo-block .bh-link{ margin-right: 8px;}
.element-doc .base-code-area{ display: block; padding: 18px 24px; background-color: #fafafa; border: 1px solid #eaeefb;}

/* 代码演示模块 */
.source-case-mod{
	position: relative;
	display: inline-block;
	width: 100%;
	margin: 0 0 16px;
	border: 1px solid #f0f0f0;
	border-radius: 2px;
}
.source-case-mod .code-box-demo {
    padding: 42px 24px 50px;
    color: #000000d9;
    border-bottom: 1px solid #f0f0f0;
}
.source-case-mod .code-box-meta{
	position: relative;
	width: 100%;
	font-size: 14px;
	border-radius: 0;
	transition: background-color .4s;
	border-bottom: 1px dashed #f0f0f0;
}
.source-case-mod .code-box-title {
    position: absolute;
    top: -14px;
    margin-left: 16px;
    padding: 1px 8px;
    color: #777;
    background: #fff;
    border-radius: 2px 2px 0 0;
    transition: background-color .4s;
}
.source-case-mod .code-box-description {
    padding: 18px 24px 12px;
}
.source-case-mod .code-box-actions {
    display: flex;
    justify-content: center;
    padding: 12px 0;
    border-top: 1px dashed #f0f0f0;
    opacity: .7;
    transition: opacity .3s;
}
.source-case-mod .code-box-code-action{
	position: relative;
    display: flex;
    align-items: center;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    color: #00000073;
    cursor: pointer;
    transition: all .24s;
}
.source-case-mod .code-box-code-action3{
	background: url('./assets/expand.svg') center center no-repeat;
	background-size: 100% 100%;
}
.source-case-mod .highlight-wrapper{
	display: none;
}
.source-case-mod.show-case-core .code-box-code-action3{
	background-image: url('./assets/unexpand.svg');
}
.source-case-mod.show-case-core .highlight-wrapper{
	display: block;
}